<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('维度管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <style>
        .layui-table-click {
            background-color:#1E9FFF;
            color:#fff;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-md-4" style="background-color: #fff;min-height:550px"> <!--style="font-size:16px;margin-top:6px;"-->
            <table id="bootstrap-table" style="margin-top: 10px"></table>
        </div>
        <div class="col-md-8" style="padding-right: 0px">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">维度数据</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">维度结构</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <table class="table table-bordered">
                                <thead id="thead_data" >
                                </thead>
                                <tbody id="tbody_data" >
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <div class="btn-group-sm" id="toolbar" role="group">
                                <a class="btn btn-success" onclick="add()">
                                    <i class="fa fa-plus"></i> 添加
                                </a>
                            </div>
                            <table id="dimFldsTable" class="table table-bordered"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: select2-js" />
<script type="text/javascript">
    var prefix = ctx + "md/med/dim";
    var tableName;
    function add() {
        $.modal.open("添加["+tableName+"]字段",prefix+"/addFld/"+tableName);
    }
    function loadTbFldTable(tableName) {
        if(tableName==null || tableName=="" || tableName==undefined) {
            return ;
        }
        $('#dimFldsTable').bootstrapTable({
            url: "/md/med/fld/list",
            method: "post",
            contentType: "application/json",
            modalName: "执行数据",
            showSearch: false,
            showRefresh: true,
            showToggle: false,
            showColumns: false,
            queryParams: function (params) {
                return {
                    "cdTb":tableName
                };
            },
            columns: [{
                field: 'idTbFld',
                title: '主键',
                visible: false
            },
                {
                    field: 'idPubfld',
                    title: '字段编码'
                },
                {
                    field: 'naPubfld',
                    title: '字段名称'
                },
                {
                    field: 'sdConstp',
                    title: '索引类型'
                },
                {
                    field: 'naJavatp',
                    title: '类型'
                },
                {
                    field: 'numLth',
                    title: '长度'
                },
                {
                    field: 'numPrec',
                    title: '精度'
                }]
        });
    }
    function loadDimTable() {
        var na = $("#na").val();
        na = (na==""?null:na);
        $('#bootstrap-table').bootstrapTable({
            url: "/md/med/pubfld/dimList/null",
            method:"get",
            modalName: "执行数据",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: true,
            pageSize:15,
            search: true,
            sidePagination: 'client',
            showRefresh : true,
            onClickRow: onClickRow,
            columns: [{
                field: 'idPubfld',
                title: '主键',
                visible: false
            },
                {
                    field: 'na',
                    title: '维度名称'
                },
                {
                    field: 'cdTbDim',
                    title: '维度表'
                },
                {
                    field: 'numLth',
                    title: '数据量'
                }]
        });
    }
    function onClickRow(row, $element){
        $element.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        var cdTbDim = row.cdTbDim;
        tableName = cdTbDim;
        loadTbFldTable(cdTbDim);
        $.ajax({
            url:prefix+"/findDimData/"+cdTbDim,
            cache: false,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if(data.code=="0") {
                    var titles = data.data.fldList;
                    var bodyData = data.data.data;
                    var html="<tr><th width='20'></th>";
                    $.each(titles,function(index,item) {
                        html += '<th>'+item.naPubfld+'</th>';
                    });
                    $("#thead_data").html(html+"</tr>");
                    html="";
                    var value;
                    if(bodyData!=null) {
                        for(var i=0;i<bodyData.length;i++) {
                            html+="<tr><td>"+(i+1)+"</td>";
                            var trData = bodyData[i];
                            for(var j=0;j<titles.length;j++) {
                                value = trData[titles[j].idPubfld];
                                if(value==undefined) {
                                    value = "";
                                }
                                html+="<td>"+value+"</td>";
                            }
                            html+="</tr>";
                        }
                        $("#tbody_data").html(html);
                    }
                }
            }
        });
    }
    $(function(){
        loadDimTable();
        $("body").on("keypress", "#na", function (event) {
            var content = $(this).val();
            if (event.keyCode == '13') {
                $("#bootstrap-table").bootstrapTable('destroy');
                loadDimTable();
            }
        });
    });
</script>
</body>
</html>